import React from 'react'
import cssObj from '@/css/commentList.scss'
console.log(cssObj)

import 'bootstrap/dist/css/bootstrap.css'

// 评论item项定义为普通的无状态子组件
function CommentItem(props){
    return <div className={cssObj.itemDiv}>
               <h3 className={cssObj.item_user}>评论人：{props.userName}</h3>
               <p className={cssObj.item_content}>评论内容：{props.content}</p>
           </div>
}

//#region

//#endregion


export default class CommentList extends React.Component{

    constructor(){
        super()
        this.state={
            commentsList:[{
                "id":1,"userName":"xiaobai","content":"test"
            },{
                "id":2,"userName":"xiaoming","content":"今天好天气"
            },{
                "id":3,"userName":"xiaoming","content":"好地方"
            },{
                "id":4,"userName":"xiaoming","content":"好人呢"
            },{
                "id":5,"userName":"xiaoming","content":"好失败"
            },{
                "id":6,"userName":"xiaoming","content":"好水"
            }],
            txtValue:"文本内容"
        }
    }

    render(){
        return <div>
            <h1 className={[cssObj.title,cssObj.title2].join(" ")}>评论列表</h1>
            {/* <button className={[bootcss.btn,bootcss['btn-primary']].join(" ")}>提交</button> */}
            <p>{this.state.txtValue}</p>
            <input type="text" style={{width:'100%'}} value={this.state.txtValue} 
            onChange={() => this.txtChange()} ref="txt1"></input>
            <button className="btn btn-primary" onClick={() => this.btnClickHandler("点击事件")}>提交</button>
             {this.state.commentsList.map(item =>{
                return <CommentItem {...item} key={item.id}></CommentItem>
             })}
        </div>
    }

    txtChange = () =>{
        console.log(this.refs.txt1.value)
        this.setState({txtValue: this.refs.txt1.value})
    }

    // 箭头函数本身就是一个匿名的function函数
    btnClickHandler = (params) => {
        // 修改state的值 this.setState()
        this.setState({
            "commentsList":[{
                "id":1,"userName":"小白","content":"test~"
            },{
                "id":2,"userName":"小明","content":"今天好天气~"
            },{
                "id":3,"userName":"小明","content":"好地方~"
            },{
                "id":4,"userName":"小花","content":"好人呢~"
            },{
                "id":5,"userName":"小雪","content":"好失败~"
            },{
                "id":6,"userName":"小兰","content":"好水~"
            }]
        },function(){ // 回调函数
            console.log(this.state.commentsList)
        })
        // alert(params)
    }

}